<template>
  <div class="PosChartContent">
    <!-- <div class="PosChartTlt">收银设备实时状态占比</div> -->
    <img class="titImg" src="../../assets/img/posimg.png" alt="">
    <div class="PosChartcont">
      <div class="inline">
        <img class="inlineImg" src="../../assets/img/postwo.png">
        <div class="inlinetxt">
          <img src="../../assets/img/onlinetxtImg.png" width="" alt="">
        </div>
        <div class="posbtmImg">{{ online }}台</div>
      </div>
      <div class="inline1">
        <img class="inlineImg" src="../../assets/img/pos3.png">
        <div class="inlinetxt"> <img src="../../assets/img/outlinetxtImg.png" width="" alt=""></div>
        <div class="posbtmImg">{{ offline }}台</div></div>
      <div class="inline2">
        <img class="inlineImg" src="../../assets/img/posone.png">
        <div class="inlinetxt">
          <img src="../../assets/img/errorlineImg.png" width="" alt="">
        </div>
        <div class="posbtmImg">{{ error }}台</div></div>
    </div>
  </div>
</template>

<script>
import { getPosCount } from '@/api/user'
// import { rsaDecrypt } from '@/utils/commonutils3'
export default {
  name: 'PosChart',
  data() {
    return {
      online:'',
      offline:'',
      error:'',
    }
  },
  created() {
    this.getPosCount();
  },
  methods: {
    async getPosCount(){
      let res = await getPosCount()
      if(res.code === 200){
        console.log(res.data,"收银机设备实时状态");
        this.online = res.data.onLine
        this.offline = res.data.offline
        this.error = res.data.fault
      }
    }
  }
}
</script>

<style scoped lang="scss"
>
.PosChartContent{
  // padding: .1563rem;
  .titImg{
    width: 2.4948rem;
    height: .3125rem;
    margin-bottom: .1042rem;
  }
  .PosChartcont{
    height:.9427rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .inline{
      width: .7604rem;
      // border: 1px solid #0080FF;
      text-align: center;
      .inlineImg{
        width: .5208rem;
        height: .5208rem;
        margin: 0;
      }
      .inlinetxt{
        // text-align: center;
        height: .1615rem;
        width: 100%;
        line-height:.1615rem;
        // margin:  0 auto;
        // width: .2344rem;
        img{
          // height: .1615rem;
          width: .2344rem;
        }

      }
      .posbtmImg{
        width: .7604rem;
        height: .2604rem;
        padding-top: .1042rem;
        font-size: .1042rem;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: rgba(255,255,255,0.9);
        background-image: url(../../assets/img/posbtbg1.png);
        background-position: 0;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        // background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
      }
    }
    .inline1{
      width: .7604rem;
      // border: 1px solid #0080FF;
      text-align: center;
      .inlineImg{
        width: .5208rem;
        height: .5208rem;
        margin: 0;
      }
      .inlinetxt{
        // text-align: center;
        height: .1615rem;
        width: 100%;
        line-height:.1615rem;
        // margin:  0 auto;
        // width: .2344rem;
        img{
          // height: .1615rem;
          width: .2344rem;
        }

      }
      .posbtmImg{
        width: .7604rem;
        height: .2604rem;
        padding-top: .1042rem;
        font-size: .1042rem;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: rgba(255,255,255,0.9);
        background-image: url(../../assets/img/posbtbg2.png);
        background-position: 0;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        // background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
      }
    }
    .inline2{
      width: .7604rem;
      // border: 1px solid #0080FF;
      text-align: center;
      .inlineImg{
        width: .5208rem;
        height: .5208rem;
        margin: 0;
      }
      .inlinetxt{
        // text-align: center;
        height: .1615rem;
        width: 100%;
        line-height:.1615rem;
        // margin:  0 auto;
        // width: .2344rem;
        img{
          // height: .1615rem;
          width: .2344rem;
        }

      }
      .posbtmImg{
        width: .7604rem;
        height: .2604rem;
        padding-top: .1042rem;
        font-size: .1042rem;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: rgba(255,255,255,0.9);
        background-image: url(../../assets/img/posbtbg3.png);
        background-position: 0;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        // background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
      }
    }
  }
}
</style>
